<template>
  <div class="block-top"> 
    <div class="block1">
      <item class="item" :count="4"></item>

      <box-title title="租户&业务统计"></box-title>
      <div class="flex center pr">
        <div class="middle-line"></div>
        <div class="flex-1 center">
          <div class="name">客户数量</div>
          <div class="count">{{$store.state.vdcAndProjectCount.vdc}}</div>
        </div>
        <div class="flex-1 center">
          <div class="name">业务系统数量</div>
          <div class="count">{{$store.state.vdcAndProjectCount.project}}</div>
        </div>
      </div>
    </div>
    <div class="block2 flex column">
      <item class="item" :count="7"></item>

      <box-title title="网络资源统计"></box-title>
      <div class="flex-1">
        <el-carousel
          height="250px"
          indicator-position="none"
        >
          <el-carousel-item
            v-for="(item,index) in carouselLine"
            :key="index"
          >
            <box-line
              :datas="item"
              :id="'distribution'+index"
            ></box-line>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="block3 flex column">
      <item class="item" :count="7"></item>

      <box-title title="网络资源统计"></box-title>
      <div class="flex-1">
        <box-bar
          :datas="network"
          color="#f7fd37"
          id="network"
        ></box-bar>
      </div>
    </div>
  </div>
</template>
<script>
import boxBar from "../components/bar";
import boxLine from "../components/line";
import boxTitle from "../components/title";
import base from "../mixins/index";
import item from "../components/block.vue";

export default {
  mixins: [base],

  components: { boxTitle, boxBar, boxLine ,item},
};
</script>
<style lang="less" scoped>
@import url("../styles/main.less");
.count {
  color: #fff;
  font-size: 20px;
}

.name {
  color: #1ac9ff;
  padding: 10px 0;
  font-size: 14px;
}
.block-w {
  width: 445px;
  margin-top: 10px;
}
.block1 {
  height: 144px;
  .block-w;
  .block-box;
  .bolock-line-l;
}
.block2 {
  height: 280px;
  .block-w;
  .block-box;
  .bolock-line-l;
}
.block3 {
  height: 234px;
  .block-w;
  .block-box;
  .bolock-line-l;
}
.item{
  right: 0 !important;
}
</style>